<template>
  <view class="section" :data-theme="theme">
    <nav-bar
      :navTitle="title"
      iconColor="#000"
      :backgroundColor="backgroundColor"
      :isBackgroundColor="false"
    ></nav-bar>
    <view class="line">
      <image src="../static/images/line.png" v-if="addressList.length"></image>
    </view>
    <view
      class="address-management"
      :class="addressList.length < 1 && page > 1 ? 'fff' : ''"
    >
      <radio-group
        class="radio-group"
        @change="radioChange"
        v-if="addressList.length"
      >
        <view
          class="item borRadius14"
          v-for="(item, index) in addressList"
          :key="index"
        >
          <view class="address" @click="goOrder(item.id)">
            <view class="consignee"
              >收货人：{{ item.realName
              }}<text class="phone">{{ item.phone }}</text></view
            >
            <view class="fs-24"
              >收货地址：{{ item.province }}{{ item.city }}{{ item.district
              }}{{ item.street }}{{ item.detail }}</view
            >
          </view>
          <view class="operation acea-row row-between-wrapper">
            <!-- #ifndef MP -->
            <radio
              class="radio"
              :value="index.toString()"
              :checked="item.isDefault"
            >
              <text>设为默认</text>
            </radio>
            <!-- #endif -->
            <!-- #ifdef MP -->
            <radio class="radio" :value="index" :checked="item.isDefault">
              <text>设为默认</text>
            </radio>
            <!-- #endif -->
            <view class="acea-row row-middle">
              <view @click="editAddress(item.id)"
                ><text class="iconfont icon-bianji"></text>编辑</view
              >
              <view @click="delAddress(index)"
                ><text class="iconfont icon-shanchu"></text>删除</view
              >
            </view>
          </view>
        </view>
      </radio-group>
      <view class="loadingicon acea-row row-center-wrapper">
        <text
          class="loading iconfont icon-jiazai"
          :hidden="loading == false"
        ></text>
      </view>
      <emptyPage
        v-if="addressList.length == 0 && !loading"
        title="暂无添加地址~"
        :imgSrc="urlDomain + 'crmebimage/presets/noAddress.png'"
      ></emptyPage>
      <view style="height: 120rpx"></view>
    </view>
    <view class="footer acea-row row-between-wrapper">
      <!-- #ifdef APP-PLUS -->
      <view class="addressBnt bg_color on" @click="addAddress"
        ><text class="iconfont icon-tianjiadizhi"></text>添加新地址</view
      >
      <!-- #endif -->
      <!-- #ifdef MP-->
      <view class="addressBnt bg_color" @click="addAddress"
        ><text class="iconfont icon-tianjiadizhi"></text>添加新地址
      </view>
      <!-- #endif -->
      <!-- #ifdef H5-->
      <view
        class="addressBnt bg_color"
        :class="this.$wechat.isWeixin() ? '' : 'on'"
        @click="addAddress"
        ><text class="iconfont icon-tianjiadizhi"></text>添加新地址</view
      >
      <!-- #endif -->
    </view>

    <!-- #ifdef MP -->
    <!-- <atModel
      v-if="locationStatus"
      :locationType="true"
      @closeModel="modelCancel"
      @confirmModel="confirmModel"
      :content="locationContent"
    ></atModel> -->
    <!-- #endif -->
  </view>
</template>

<script>
import { getAddressList, setAddressDefault, delAddress } from "@/api/user.js";
import navBar from "@/components/navBar";
import emptyPage from "@/components/emptyPage.vue";
// import atModel from "@/components/accredit/index.vue";
// import { toLogin } from "@/libs/login.js";
import { mapGetters } from "vuex";
let app = getApp();
export default {
  components: {
    emptyPage,
    // atModel,
    navBar,
  },
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      title: "我的收货地址",
      backgroundColor: "#fff",
      addressList: [],
      cartId: "",
      pinkId: 0,
      couponId: 0,
      loading: false,
      loadend: false,
      loadTitle: "加载更多",
      page: 1,
      limit: 20,
      bargain: false, //是否是砍价
      combination: false, //是否是拼团
      secKill: false, //是否是秒杀
      theme: app.globalData.theme,
      locationContent: "授权位置信息，提供完整服务",
      locationStatus: false,
    };
  },
  computed: mapGetters(["isLogin"]),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
          this.getUserAddress(true);
        }
      },
      deep: true,
    },
  },
  onLoad(options) {
    // #ifdef APP-PLUS
    setTimeout(() => {
      uni.setNavigationBarColor({
        frontColor: "#000000",
        backgroundColor: "#ffffff",
      });
    }, 300);
    // #endif
    if (this.isLogin) {
      this.orderNo = options.orderNo || 0;
      this.getAddressList(true);
    } else {
      // toLogin();
    }
  },
  onShow: function () {
    let that = this;
    that.getAddressList(true);
  },
  methods: {
    modelCancel() {
      this.locationStatus = false;
    },
    confirmModel() {
      uni.getLocation({
        type: "gcj02",
        altitude: true,
        geocode: true,
        success: function (res) {
          try {
            uni.setStorageSync("user_latitude", res.latitude);
            uni.setStorageSync("user_longitude", res.longitude);
          } catch {}
        },
      });
      this.locationStatus = false;
    },
    /**
     * 获取地址列表
     *
     */
    getAddressList: function (isPage) {
      let that = this;
      if (that.loading) return;
      that.loading = true;
      getAddressList()
        .then((res) => {
          that.addressList = res.data;
          that.loading = false;
        })
        .catch((err) => {
          that.loading = false;
        });
    },
    /**
     * 设置默认地址
     */
    radioChange: function (e) {
      let index = parseInt(e.detail.value),
        that = this;
      let address = this.addressList[index];
      if (address == undefined)
        return that.$util.Tips({
          title: "您设置的默认地址不存在!",
        });
      setAddressDefault(address.id)
        .then((res) => {
          for (let i = 0, len = that.addressList.length; i < len; i++) {
            if (i == index) that.addressList[i].isDefault = true;
            else that.addressList[i].isDefault = false;
          }
          that.$util.Tips(
            {
              title: "设置成功",
              icon: "success",
            },
            function () {
              that.$set(that, "addressList", that.addressList);
            }
          );
        })
        .catch((err) => {
          return that.$util.Tips({
            title: err,
          });
        });
    },
    /**
     * 编辑地址
     */
    editAddress: function (id) {
      uni.navigateTo({
        url: `/pages/address/user_address/index?id=${id}&orderNo=${this.orderNo}`,
      });
    },
    /**
     * 删除地址
     */
    delAddress: function (index) {
      let that = this,
        address = this.addressList[index];
      if (address == undefined)
        return that.$util.Tips({
          title: "您删除的地址不存在!",
        });
      uni.showModal({
        content: "确定删除该地址",
        cancelText: "取消", // 取消按钮的文字
        confirmText: "确定", // 确认按钮文字
        showCancel: true, // 是否显示取消按钮，默认为 true
        confirmColor: "#f55850",
        success: (res) => {
          if (res.confirm) {
            delAddress(address.id)
              .then((res) => {
                that.addressList.splice(index, 1);
                that.$set(that, "addressList", that.addressList);
                that.$util.Tips({
                  title: "删除成功",
                  icon: "success",
                });
              })
              .catch((err) => {
                return that.$util.Tips({
                  title: err,
                });
              });
          } else {
          }
        },
      });
    },
    /**
     * 新增地址
     */
    addAddress: function () {
      uni.navigateTo({
        url: "/pages/address/user_address/index?orderNo=" + this.orderNo,
      });
    },
    goOrder: function (id) {
      if (this.orderNo) {
        uni.redirectTo({
          url:
            "/pages/goods/order_confirm/index?is_address=1&orderNo=" +
            this.orderNo +
            "&addressId=" +
            id,
        });
      }
    },
  },
  onReachBottom: function () {
    this.getAddressList();
  },
};
</script>

<style lang="scss" scoped>
.address-management {
  padding: 20rpx 30rpx;
}

.address-management.fff {
  background-color: #fff;
  height: 1300rpx;
}

.bg_color {
  //  @include main_bg_color(theme);
  background: #11cc7b;
}

.line {
  width: 100%;
  height: 3rpx;

  image {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.address-management .item {
  background-color: #fff;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
}

.address-management .item .address {
  padding: 50rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  font-size: 28rpx;
  color: #282828;
}

.address-management .item .address .consignee {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.address-management .item .address .consignee .phone {
  margin-left: 25rpx;
}

.address-management .item .operation {
  height: 100rpx;
  font-size: 28rpx;
  color: #282828;
}

.address-management .item .operation .radio text {
  margin-left: 13rpx;
}

.address-management .item .operation .iconfont {
  color: #2c2c2c;
  font-size: 35rpx;
  vertical-align: -2rpx;
  margin-right: 10rpx;
}

.address-management .item .operation .iconfont.icon-shanchu {
  margin-left: 35rpx;
  font-size: 38rpx;
}

.footer {
  position: fixed;
  width: 100%;
  background-color: #fff;
  bottom: 0;
  height: 160rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.footer .addressBnt {
  width: 100%;
  height: 76rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 76rpx;
  font-size: 30rpx;
  color: #fff;
}

.footer .addressBnt.on {
  width: 690rpx;
  margin: 0 auto;
}

.footer .addressBnt .iconfont {
  font-size: 35rpx;
  margin-right: 8rpx;
  vertical-align: -1rpx;
}

.footer .addressBnt.wxbnt {
  @include left_color(theme);
}

/deep/ radio .wx-radio-input.wx-radio-input-checked {
  //   @include main_bg_color(theme);
  background: #eb3f3a;
  border-color: #eb3f3a;
  //   @include coupons_border_color(theme);
}

/deep/ radio .uni-radio-input.uni-radio-input-checked {
  //   @include main_bg_color(theme);
  background: #eb3f3a;
  border: none !important;
}
</style>
